<template>
  <div class="song-list-album">
    <div class="album-slide">
      <div class="album-img">
        <img :src="attachImageUrl(tempList.pic)">
      </div>
      <div class="album-info">
        <h2>简介：</h2>
        <span>
          {{tempList.introduction}}
        </span>
      </div>
    </div>
    <div class="album-content">
      <div class="album-title">
        <p>{{tempList.title}}</p>
      </div>
      <div class="album-score">
        <div>
          <h3>歌单评价：</h3>
          <div>
            <el-rate v-model="average" disabled></el-rate>
          </div>
        </div>
        <span>{{average*2}}</span>
        <div>
          <h3>评价：</h3>
          <div @click="setRank">
            <el-rate v-model="rank" allow-half show-text></el-rate>
          </div>
        </div>
      </div>
      <div class="songs-body">
        <album-content :songList="listOfSongs">
          <template slot="title">歌单</template>
        </album-content>
        <comment :playId="songListId" :type="1"></comment>
      </div>
    </div>
  </div>
</template>
<script>
  import {mixin} from "@/mixins"
  import {mapGetters} from 'vuex'
  import {listSongDetail,songOfSongId,setRank,getRankOfSongListId} from "@/api";
  import AlbumContent from "../components/AlbumContent"
  import Comment from "../components/Comment";

  export default {
    name: 'song-list-album',
    mixins: [mixin],
    data(){
      return {
        songList: [],     //当前页面需要展示的歌曲列表
        songListId: '',   //前面传来的歌单id
        rank: 0,         //提交评价的分数
        average: 0       //平均分
      }
    },
    components: {
      AlbumContent,
      Comment
    },
    computed: {
      ...mapGetters([
        'listOfSongs',  //当前播放列表
        'tempList',     //当前歌单对象
        'loginIn',      //用户是否已登录
        'userId'       //当前登录用户id
      ])
    },
    created() {
      this.songListId = this.$route.params.id
      this.getSongId()
      this.getRank(this.songListId)
    },
    methods: {
      //获取当前歌单的歌曲列表
      getSongId(){
        listSongDetail(this.songListId).then(res => {
          for(let item of res){
            this.getSongList(item.songId)
          }
          this.$store.commit('setListOfSongs',this.songList)
        }).catch(err => {
          console.log(err)
        })
      },
      //根据歌曲id获取歌曲信息
      getSongList(id){
        songOfSongId(id).then(res => {
          this.songList.push(res)
        }).catch(err => {
          console.log(err)
        })
      },
      //获取评分
      getRank(id){
        getRankOfSongListId(id).then(res => {
          this.average = res/2
        }).catch(err => {
          console.log(err)
        })
      },
      //提交评分
      setRank(){
        if(this.loginIn == true){
          console.log(this.loginIn)
          let params = new URLSearchParams();
          params.append('songListId',this.songListId);
          params.append('consumerId',this.userId);
          params.append('score',this.rank *2);
          setRank(params)
            .then(res => {
              if(res.code == 1){
                this.notify('评分成功','success');
                this.getRank(this.songListId);
              }else{
                this.notify('评分失败','error');
              }
            })
            .catch(err =>{
              this.notify('您已经评价过啦','error');
            })
        }else{
          this.rank = null;

          this.notify('请先登录','warning');
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../assets/css/song-list-album.scss';
</style>
